<script setup lang="ts">
import { reactive } from "vue";
// 按需引入需要的图标
import { User, Lock } from "@element-plus/icons-vue"
import userStore from '../store/UserStore';
import { ElMessage } from "element-plus";
import { axios_no_token } from "../request/index";
import router from "../router";
let store = userStore();

let loginForm = reactive({
    empno: '',
    pwd: '',
    ename:''
});
let loginCheck = () => {
    // 账号和密码非空验证（）
    if (loginForm.empno == "" || loginForm.pwd == "") {
        ElMessage.warning("请输入账号密码");
    } else {
        axios_no_token({
            url: "/login",
            method: "POST",
            data: loginForm

        }).then((res) => {
            // ElMessage.success("登录数据访问成功");
            if (res.data.code == "100") {
                console.log(res.data);
                sessionStorage.setItem("token", res.data.data.token);
                store.saveAccount(res.data.data.ename);
                store.saveDeptno(res.data.data.deptno);
                store.saveEmpno(res.data.data.empno);
                store.saveRoot(res.data.data.root);    
                ElMessage.success("登录成功");
                router.push("/home");
            } else {
                ElMessage.error("账号或密码错误");
            }
        }).catch(err => {
            ElMessage.error("登录数据访问失败");
            console.log(err);
        })
    }
}

</script>

<template>
    <div id="login">

        <el-form :model="loginForm" label-width="auto" style="max-width: 600px">

            <div style="text-align: center;color: rgb(177.3, 179.4, 183.6); padding-bottom: 10px;">请输入用户名和密码进行登录</div>
            <div class="item"><el-col :span="18">
                    <el-input :prefix-icon="User" v-model="loginForm.empno" placeholder="请输入用户名"
                        :input-style="{ color: '#565654'}" style="padding-bottom: 5px;" />
                </el-col></div>

            <div class="item"><el-col :span="18">
                    <el-input :prefix-icon="Lock" type="password" v-model="loginForm.pwd" placeholder="请输入密码"
                        :input-style="{ color: '#565654' }" style="padding-bottom: 10px;" />
                </el-col></div>

            <div class="item"><el-form-item>
                    <el-button type="primary" @click="loginCheck()">登录</el-button>
                </el-form-item>
            </div>
            <div class="item">
                <RouterLink to="/login_forget">
                    <el-link type="primary" style="padding-left: 5px;">忘记密码？</el-link>
                </RouterLink>
            </div>

        </el-form>
    </div>
</template>

<style scoped>
#login {
    width: 100%;
    height: 100%;
    border: 1px solid rgb(115.2, 117.6, 122.4);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px rgb(255, 255, 255);
}

.item {
    display: flex;
    justify-content: center;
}
</style>